<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<main id="app">
			<p>{{msg}}</p>
			<input type="text" v-model="text" />
			<button @click="handleSend">消息发送</button>
		</main>
		<script src="vue.min.js"></script>
		<script>
			// let ws = new WebSocket('ws://192.168.1.22:8091/yb/feedback/yb2/ADM/1/1','eyJhcHBsaWNhdGlvbk5hbWUiOiJ5YjIiLCJwayI6IjYiLCJ0eXBlIjoiVVNSIn0=');
			let ws = new WebSocket('ws://127.0.0.1:8091/yb/feedback/yb2/ADM/1/1','eyJhcHBsaWNhdGlvbk5hbWUiOiJ5YjIiLCJmdW5TZXQiOlsiL2FkbWluL2RlbGV0ZSIsIi9hZG1pbi9pbnNlcnQiLCIvYWRtaW4vcXVlcnlBbGxGdW5MaXN0IiwiL2FkbWluL3F1ZXJ5TGlzdCIsIi9hZG1pbi91cGRhdGUiLCIvYWRtaW4vdXBkYXRlRnVucyIsIi9hZG1pbi91cGRhdGVTZWxmIiwiL2NsYXNzZXMvKiIsIi9mZWVkYmFjay8qIiwiL3Jlc291cmNlLyoiLCIvdXNlci8qIiwiL3liL2ZlZWRiYWNrLyoiXSwicGsiOiIxIiwidHlwZSI6IkFETSJ9');
			// let ws = new WebSocket('ws://127.0.0.1:8091/yb/feedback?applicationName=yb2&type=ADM&uid=1','eyJhcHBsaWNhdGlvbk5hbWUiOiJ5YjIiLCJwayI6IjYiLCJ0eXBlIjoiVVNSIn0=');
			
			console.log("ws.protocol = ", ws.protocol);
		
			let vue = new Vue({
				el: "#app",
				data: {
					text: "Fengxian",
					msg: "",
				},
				methods: {
					handleSend() {
						if (this.text != "") {
							ws.send(this.text);
						}
					}
				},
			})
		    
		 
		    // 建立 web socket 连接成功触发事件
		    ws.onopen = function () {
		        vue.msg = "服务器连接成功"
		    };
		 
		    //接收到消息的回调方法
		    ws.onmessage = function (event) {
		        vue.msg = event.data;
		        console.log(event.data);//后台不间断发送数据，持续接收。
		    }
		 
		    //断开 web socket 连接成功触发事件
		    ws.onclose = function () {
		        alert("连接已关闭...");
		    };
		</script>
	</body>
</html>
